<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

const goBack = () => {
  router.go(-1)
}
</script>

<template>
    <div class="mobile-nav">
      <button class="back-button" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20v-2z" />
        </svg>
      </button>
      <div class="nav-title">产品分享系统</div>
    </div>
    <router-view />
</template>

<style>


.mobile-nav {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.back-button {
  background: none;
  border: none;
  padding: 8px;
  margin-right: 12px;
  color: #42b983;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

/* 保持原有样式 */
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
</style>
